<template>
  <page-layout>
    <crud-container :edit-info.sync="editInfo" dialog-width="500px"
                    @doCreate="doCreateBefore" @doUpdate="doUpdateBefore">
      <el-form inline slot="header">
        <el-form-item label="角色名称/说明">
          <el-input size="small" v-model="listQuery.name"></el-input>
        </el-form-item>
        <el-form-item>
          <primary-button @click.native="loadList">查询</primary-button>
        </el-form-item>
        <el-form-item>
          <primary-button @click.native="createHandle">新增</primary-button>
        </el-form-item>
      </el-form>
      <table-data :table-data="tableData" :columns="columns">
        <template slot="operateButtons" slot-scope="scope">
          <el-link type="primary" @click="editHandle(scope.row)">编辑</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="danger" @click="doDelete(scope.row.pkId)">删除</el-link>
        </template>
      </table-data>
      <el-pagination slot="footer" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-size="listQuery.pageSize"
                     layout="total, prev, pager, next" :total="total">
      </el-pagination>
      <role-edit-form slot="dialogBody" ref="editForm" :data-form="temp"></role-edit-form>
    </crud-container>
  </page-layout>
</template>

<script>
import PageLayout from '@/components/PageLayout'
import CrudContainer from "@/components/CrudContainer";
import BaseExtend from "@/extends/BaseExtend";
import {PrimaryButton} from "@/components/Form"
import TableData from "@/components/TableData/TableData";
import RoleEditForm from './components/roleEditForm'

import {page, create, update, remove} from '@/api/role'

export default {
  extends: BaseExtend,
  components: {TableData, PageLayout, CrudContainer, PrimaryButton, RoleEditForm},
  data() {
    return {
      listQuery: {
        name: ''
      },
      columns: [
        {label: '角色名称', prop: 'name'},
        {label: '角色描述', prop: 'noteDesc'},
        {label: '排序', prop: 'orderNum'},
        {label: '创建人', prop: 'createdBy'},
        {label: '创建时间', prop: 'createdTime', type: 'date'},
      ]
    }
  },
  component: {},
  computed: {},
  watch: {},
  methods: {
    loadList() {
      page(this.listQuery).then(res => {
        this.tableData = res.result.records
        this.total = res.result.total
      })
    },
    doCreate() {
      create(this.temp).then(res => {
        this.ok(res, '添加', this.saveCbk)
      })
    },
    doUpdate() {
      update(this.temp).then(res => {
        this.ok(res, '修改', this.saveCbk)
      })
    },
    doDelete(id) {
      this.$confirm('确定要删除此角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id).then(res => {
          this.ok(res, '删除', this.loadList)
        })
      }).catch(() => {
      });
    }
  }
}
</script>
